<template>
	<div class="orderList">
		<div style="display: flex;justify-content: space-between;">
			<div style="display: flex">
				<el-button v-if="userInfo.roleId < 4" type="primary" @click="addOrder">
					下单
				</el-button>
				<el-button v-if="userInfo.roleId === 3" type="primary" @click="leaderboard">
					排行榜
				</el-button>
				<el-button v-if="userInfo.roleId === 1" type="primary" @click="getRemindDays">
					提醒天数
				</el-button>
				<el-button type="primary" @click="exportExcel" style="margin: 0 10px;">
					导出Excel
				</el-button>
			</div>
			<div style="display: flex;">
				<el-input v-model="sn" placeholder="按流水号搜索" @change="getOrderList" style="width: 220px;" clearable>
				</el-input>
				<el-input v-model="name" placeholder="按客户/公司名搜索" @change="getOrderList"
					style="width: 180px;margin-left: 10px;" clearable>
				</el-input>
				<el-select v-model="userId" filterable remote :loading="userLoading" placeholder="按业务员搜索"
					:remote-method="getUserList" @change="selectUserChange" @focus="getUserList('')"
					style="margin-left: 10px; width: 150px;" v-if="userInfo.roleId < 3">
					<el-option v-for="item in userList" :key="item.id" :label="item.nickName" :value="item.id">
					</el-option>
				</el-select>
				<el-select v-model="collectedType" placeholder="收款情况" @change="selectCTChange"
					style="margin-left: 10px;width: 120px;">
					<el-option label="全部" :value="void 0"></el-option>
					<el-option label="未收款" :value="0"></el-option>
					<el-option label="已收款" :value="1"></el-option>
					<el-option label="部分收款" :value="2"></el-option>
				</el-select>
				<el-select v-model="orderApprovalFlowIdType" placeholder="下单审批" @change="selectOTChange"
					style="margin-left: 10px;width: 120px;">
					<el-option label="全部" :value="void 0"></el-option>
					<el-option label="待审核" :value="0"></el-option>
					<el-option label="审核通过" :value="1"></el-option>
					<el-option label="下单驳回" :value="2"></el-option>
				</el-select>
				<el-select v-model="paymentApprovalFlowIdType" placeholder="收款审批" @change="selectPTChange"
					style="margin-left: 10px;width: 120px;">
					<el-option label="全部" :value="void 0"></el-option>
					<el-option label="待审核" :value="0"></el-option>
					<el-option label="收款通过" :value="1"></el-option>
					<el-option label="收款驳回" :value="2"></el-option>
				</el-select>
				<el-select v-model="status" placeholder="订单状态" @change="selectStatusChange"
					style="margin-left: 10px;width: 120px;">
					<el-option label="全部" :value="void 0"></el-option>
					<el-option label="未逾期" :value="0"></el-option>
					<el-option label="已收款" :value="1"></el-option>
					<el-option label="已逾期" :value="2"></el-option>
				</el-select>
				<el-button style="margin-left: 10px;" @click="rest" v-debounce>
					重置
				</el-button>
			</div>
		</div>
		<div class="order-table">
			<el-table :data="tableData" v-loading="loading" border style="width: 100%" height="100%"
				:row-style="tableRow" ref="multipleTable">
				<el-table-column prop="i" label="序号" fixed="left" width="50">
				</el-table-column>
				<!-- <el-table-column prop="sn" label="订单流水号" width="150"></el-table-column> -->
				<el-table-column label="订单类型" width="80" fixed>
					<template slot-scope="scope">
						<span v-if="scope.row.orderType === 1">开销开单</span>
						<span v-else>签订合同</span>
					</template>
				</el-table-column>
				<el-table-column prop="company" label="公司名称" width="115" fixed>
				</el-table-column>
				<el-table-column label="客户姓名" prop="name" width="80" v-if="userInfo.roleId !== 6" fixed>
				</el-table-column>
				<el-table-column prop="phone" label="联系电话" width="115" v-if="userInfo.roleId !== 6">
				</el-table-column>
				<el-table-column prop="nickName" label="业务员" width="80">
				</el-table-column>
				<el-table-column prop="deliveryTime" label="交货时间" width="100" v-if="userInfo.roleId !== 6">
				</el-table-column>
				<el-table-column label="产品列表" width="80" v-if="userInfo.roleId !== 6">
					<template slot-scope="scope">
						<el-button type="text" @click="partsOpen(scope.row)">点击查看</el-button>
					</template>
				</el-table-column>
				<el-table-column label="总金额(元)" width="125">
					<template slot-scope="scope">
						<el-popover v-if="scope.row.orderType === 2" trigger="hover" placement="top">
							<p>总金额：{{ scope.row.transactionAmount }}</p>
							<p>定金：{{ scope.row.deposit }}</p>
							<p>首付款：{{ scope.row.downPayment }}</p>
							<p>尾款：{{ scope.row.balancePayment }}</p>
							<span slot="reference">{{ `${scope.row.transactionAmount}(${scope.row.arrears})` }}</span>
						</el-popover>
						<span v-else>{{ `${scope.row.transactionAmount}(${scope.row.arrears})` }}</span>
					</template>
				</el-table-column>
				<el-table-column label="付款方式" width="80">
					<template slot-scope="scope">
						<el-popover v-if="scope.row.paymentMethod > 0" trigger="hover" placement="top">
							<p>总分期数：{{ scope.row.paymentMethod }} 期</p>
							<p>剩余期数：{{ scope.row.residuePeriods }} 期</p>
							<p>每期应还：{{ scope.row.phaseAmount }}</p>
							<p>末期应还：{{ scope.row.lastAmount }}</p>
							<p>每月还款日：{{ scope.row.repaymentDate }} 号</p>
							<span slot="reference">分期</span>
						</el-popover>
						<span v-else>全款</span>
					</template>
				</el-table-column>
				<el-table-column label="付款类型" width="80">
					<template slot-scope="scope">
						<span v-if="scope.row.paymentType === 0">先发后付</span>
						<span v-else>先付后发</span>
					</template>
				</el-table-column>
				<el-table-column label="身份证复印件" width="110" v-if="userInfo.roleId !== 6">
					<template slot-scope="scope">
						<div v-if="scope.row.copyOfIdCard !== null"
							style="width: 100%; white-space: nowrap; overflow: hidden;">
							<el-image :src="scope.row.copyOfIdCardList[0]"
								:preview-src-list="scope.row.copyOfIdCardList"
								style="width: 80px; height: 80px; margin-left: 5px;">
							</el-image>
						</div>
						<div v-else>
							<span>暂无图片</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="验收单" width="110" v-if="userInfo.roleId !== 6">
					<template slot-scope="scope">
						<div v-if="scope.row.receipt !== null"
							style="width: 100%; white-space: nowrap; overflow: hidden;">
							<el-image :src="scope.row.receiptList[0]" :preview-src-list="scope.row.receiptList"
								style="width: 80px; height: 80px; margin-left: 5px;">
							</el-image>
						</div>
						<div v-else>
							<span>暂无图片</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="物流信息" width="110" v-if="userInfo.roleId !== 6">
					<template slot-scope="scope">
						<div v-if="scope.row.logisticsInformation !== null"
							style="width: 100%; white-space: nowrap; overflow: hidden;">
							<el-image :src="scope.row.logisticsInformationList[0]"
								:preview-src-list="scope.row.logisticsInformationList"
								style="width: 80px; height: 80px; margin-left: 5px;">
							</el-image>
						</div>
						<div v-else>
							<span>暂无图片</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="签订合同" width="110" v-if="userInfo.roleId !== 6">
					<template slot-scope="scope">
						<div v-if="scope.row.contract !== null"
							style="width: 100%; white-space: nowrap; overflow: hidden;">
							<el-image :src="scope.row.contractList[0]" :preview-src-list="scope.row.contractList"
								style="width: 80px; height: 80px; margin-left: 5px;">
							</el-image>
						</div>
						<div v-else>
							<span>暂无图片</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="订单状态" fit>
					<template slot-scope="scope">
						<span v-if="scope.row.status === 0">未收款</span>
						<span v-else-if="scope.row.status === 1">已收款</span>
						<span v-else>已欠款</span>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="下单时间" width="110">
				</el-table-column>
				<el-table-column prop="remark" label="备注" width="180">
				</el-table-column>
				<el-table-column label="操作" width="230" fixed="right">
					<template slot-scope="scope">
						<div style="display: flex">
							<el-button size="mini" @click="examine(scope.row)" v-if="examineButtonShow(scope.row)"
								:type="orderButtonType(scope.row.orderFlowId)"
								:disabled="orderButtonDisabled(scope.row.orderFlowId)">
								{{ orderButtonText(scope.row.orderFlowId) }}
							</el-button>
							<el-button size="mini" @click="applicationOpen(scope.row)"
								v-if="paymentButtonShow(scope.row)" :type="paymentButtonType(scope.row.paymentFlowId)"
								:disabled="paymentButtonDisabled(scope.row.paymentFlowId)">
								{{ paymentButtonText(scope.row.paymentFlowId) }}
							</el-button>
							<el-button size="mini" @click="details(scope.row)" v-if="userInfo.roleId !== 6">
								详情
							</el-button>
							<el-button size="mini" type="danger" @click="deleteOrder(scope.row)"
								v-if="userInfo.roleId === 1">
								删除
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[20, 50, 100]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<!-- 提醒天数弹窗 -->
		<el-dialog style="margin-top:0" :visible.sync="remindShow" width="30%" title="提醒天数">
			<h4>设置到期还款提前提醒天数</h4>
			<el-input v-model="remindDays" placeholder="提醒天数" type="number" @input="inputCheck">
			</el-input>
			<div slot="footer">
				<el-button @click="remindShow = false">取消</el-button>
				<el-button type="primary" @click="updateReminderDays" v-debounce>
					确定
				</el-button>
			</div>
		</el-dialog>
		<!-- 查看产品列表弹窗 -->
		<el-dialog style="margin-top:0" :visible.sync="partsShow" width="75%" :title="selectTitle" @close="partsClose">
			<div class="data-table">
				<el-table :data="selectData.goodsList" border stripe style="width: 100%" :max-height="500">
					<el-table-column prop="i" fixed="left" label="序号" width="50">
					</el-table-column>
					<el-table-column label="图片" width="115">
						<template slot-scope="scope">
							<el-image :src="READ_IMG_URL + scope.row.image" style="width: 90px; height: 90px;"
								:preview-src-list="new Array(READ_IMG_URL + scope.row.image)">
							</el-image>
						</template>
					</el-table-column>
					<el-table-column prop="isProduct" label="产品类型" width="80">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.isProduct == 0">成品</el-tag>
							<el-tag type="warning" v-if="scope.row.isProduct == 1">零件</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="partName" label="产品名称" fit>
					</el-table-column>
					<el-table-column prop="model" label="产品型号" fit>
					</el-table-column>
					<el-table-column prop="devicesDescribe" label="产品描述" fit>
					</el-table-column>
					<el-table-column prop="remark" label="备注" fit>
					</el-table-column>
					<el-table-column prop="price" label="销售单价" width="80">
					</el-table-column>
					<el-table-column prop="goodsCount" label="卖出数量" width="80">
					</el-table-column>
					<el-table-column prop="totalAmount" label="总计" width="80">
					</el-table-column>
				</el-table>
			</div>
		</el-dialog>
		<!-- 订单审核 -->
		<el-dialog style="margin-top:0" :visible.sync="orderShow" width="75%" title="下单审核" @close="orderCloseDialog">
			<el-form inline label-position="top">
				<el-form-item label="订单类型">
					<el-select :value="selectData.orderType" style="width: 100%;" disabled>
						<el-option label="开销开单" :value="1"></el-option>
						<el-option label="签订合同" :value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="下单客户">
					<el-input :value="selectData.name" readonly></el-input>
				</el-form-item>
				<el-form-item label="联系电话">
					<el-input :value="selectData.phone" readonly>
					</el-input>
				</el-form-item>
				<el-form-item label="公司名称">
					<el-input :value="selectData.company" readonly>
					</el-input>
				</el-form-item>
				<el-form-item label="交货地址">
					<el-input :value="selectData.address" readonly>
					</el-input>
				</el-form-item>
				<el-form-item label="交货时间" prop="deliveryTime">
					<el-date-picker :value="selectData.deliveryTime" type="date" style="width: 100%;" readonly>
					</el-date-picker>
				</el-form-item>
				<el-form-item label="总金额">
					<el-input :value="selectData.transactionAmount" readonly>
					</el-input>
				</el-form-item>
				<el-form-item v-if="selectData.orderType === 2" label="定金">
					<el-input :value="selectData.deposit" readonly>
					</el-input>
				</el-form-item>
				<el-form-item v-if="selectData.orderType === 2" label="首付款">
					<el-input :value="selectData.downPayment" readonly>
					</el-input>
				</el-form-item>
				<el-form-item v-if="selectData.orderType === 2" label="尾款">
					<el-input :value="selectData.balancePayment" readonly>
					</el-input>
				</el-form-item>
				<el-form-item v-if="selectData.orderType === 2" label="付款方式">
					<el-input v-if="selectData.paymentMethod > 0" readonly :value="`分 ${selectData.paymentMethod} 期`">
					</el-input>
					<el-input v-else value="全款" readonly></el-input>
				</el-form-item>
				<el-form-item v-if="selectData.orderType === 2
					&& selectData.paymentMethod > 0" label="每期应还">
					<el-input :value="selectData.phaseAmount" readonly>
					</el-input>
				</el-form-item>
				<el-form-item v-if="selectData.orderType === 2
					&& selectData.paymentMethod > 0" label="末期应还">
					<el-input v-model="selectData.lastAmount" readonly>
					</el-input>
				</el-form-item>
				<el-form-item v-if="selectData.orderType === 2
					&& selectData.paymentMethod > 0" label="每月还款日">
					<el-input :value="`${selectData.repaymentDate} 号`" readonly>
					</el-input>
				</el-form-item>
				<el-form-item label="付款类型">
					<el-select v-model="selectData.paymentType" disabled>
						<el-option label="先发后付" :value="0"></el-option>
						<el-option label="先付后发" :value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-if="selectData.orderType === 2" label="客户身份证号">
					<el-input v-model="selectData.clientsIdCard" readonly>
					</el-input>
				</el-form-item>
				<el-form-item label="产品列表" style="width: 100%;">
					<div class="data-table">
						<el-table :data="selectData.goodsList" border stripe style="width: 100%" :max-height="500">
							<el-table-column prop="i" fixed="left" label="序号" width="60">
							</el-table-column>
							<el-table-column label="图片" width="120">
								<template slot-scope="scope">
									<el-image :src="READ_IMG_URL + scope.row.image" style="width: 90px; height: 90px;"
										:preview-src-list="new Array(READ_IMG_URL + scope.row.image)">
									</el-image>
								</template>
							</el-table-column>
							<el-table-column prop="partName" label="零件名称" fit>
							</el-table-column>
							<el-table-column prop="model" label="零件型号" fit>
							</el-table-column>
							<el-table-column prop="price" label="销售单价" width="100">
							</el-table-column>
							<el-table-column prop="goodsCount" label="卖出数量" width="100">
							</el-table-column>
							<el-table-column prop="totalAmount" label="总计" width="100">
							</el-table-column>
						</el-table>
					</div>
				</el-form-item>
				<div>
					<el-button type="success" @click="orderExamine(1)" v-debounce>
						通过
					</el-button>
					<el-button type="danger" @click="orderExamine(2)" v-debounce>
						驳回
					</el-button>
					<el-button @click="orderCloseDialog">取消</el-button>
				</div>
			</el-form>
		</el-dialog>
		<!-- 收款审核 -->
		<el-dialog style="margin-top:0" :visible.sync="applicationShow" width="75%" title="收款审核"
			@close="applicationCloseDialog">
			<el-form inline label-position="top">
				<el-form-item label="订单流水号">
					<el-input :value="selectData.sn" readonly>
					</el-input>
				</el-form-item>
				<el-form-item label="订单类型">
					<el-select :value="selectData.orderType" style="width: 100%;" disabled>
						<el-option label="开销开单" :value="1"></el-option>
						<el-option label="签订合同" :value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-if="selectData.orderType === 2 && selectData.paymentMethod > 0" label="总期数">
					<el-input :value="billing.totalPeriod" readonly>
					</el-input>
				</el-form-item>
				<el-form-item label="总金额">
					<el-input :value="selectData.transactionAmount" readonly>
					</el-input>
				</el-form-item>
				<el-form-item v-if="selectData.orderType === 2" label="本期">
					<el-input v-if="billing.currentPeriod === -1" value="定金" readonly>
					</el-input>
					<el-input v-else-if="billing.currentPeriod === 0" value="首付款" readonly>
					</el-input>
					<el-input v-else :value="billing.currentPeriod" readonly>
					</el-input>
				</el-form-item>
				<el-form-item label="收款金额">
					<el-input :value="billing.amount" readonly>
					</el-input>
				</el-form-item>
				<el-form-item label="收款日期">
					<el-input :value="billing.repaymentDate" readonly>
					</el-input>
				</el-form-item>
				<el-form-item label="实收金额">
					<el-input :value="billing.fundsReceived" readonly>
					</el-input>
				</el-form-item>
				<el-form-item label="实收日期">
					<el-input :value="billing.dateReceived" readonly>
					</el-input>
				</el-form-item>
				<el-form-item label="收款账户">
					<el-input :value="billing.account" readonly>
					</el-input>
				</el-form-item>
				<div>
					<el-button type="success" @click="orderPayment(1)" v-if="selectData.paymentFlowId == '0'"
						v-debounce>
						通过
					</el-button>
					<el-button type="danger" @click="orderPayment(2)" v-if="selectData.paymentFlowId == '0'" v-debounce>
						驳回
					</el-button>
					<el-button @click="applicationCloseDialog">
						取消
					</el-button>
				</div>
			</el-form>
		</el-dialog>
		<!-- 排行榜 -->
		<el-dialog style="margin-top:0" :visible.sync="leaderboardShow" width="60%" title="排行榜">
			<div style="display: flex;justify-content: space-between;">
				<div>
					<div>
						<label class="leaderboardLabel">
							{{ `我的排名：${selectLeaderboard.ranking}` }}
						</label>
						<label class="leaderboardLabel">
							{{ `提成点：${selectLeaderboard.percentage}` }}
						</label>
						<label class="leaderboardLabel">
							{{ `订单数：${selectLeaderboard.total}` }}
						</label>
					</div>
					<div>
						<label class="leaderboardLabel">
							{{ `销售金额：${selectLeaderboard.salesAmount}` }}
						</label>
						<label class="leaderboardLabel">
							{{ `回款金额：${selectLeaderboard.collectionAmount}` }}
						</label>
						<label class="leaderboardLabel">
							{{ `发放金额：${selectLeaderboard.totalAmount}` }}
						</label>
					</div>
				</div>
				<div>
					<el-date-picker v-model="selectDate" :type="dateType" :clearable="false" placeholder="选择日期"
						@change="changeDate" style="width: 130px;">
					</el-date-picker>
					<el-select v-model="dateType" style="width: 70px;" @change="changeType">
						<el-option value="year" label="年"></el-option>
						<el-option value="month" label="月"></el-option>
					</el-select>
				</div>
			</div>
			<el-table :data="leaderboardData" v-loading="leaderboardLoading" border stripe
				style="width: 100%;margin-top: 10px;" :height="400">
				<el-table-column prop="ranking" label="排名" fit></el-table-column>
				<el-table-column prop="nickName" label="姓名" fit></el-table-column>
				<el-table-column prop="total" label="订单数" fit></el-table-column>
			</el-table>

		</el-dialog>
	</div>
</template>

<script>
import config from '../../api/apiURL.js';
import orderApi from '../../api/order.js';
import userApi from '../../api/user.js';
export default {
	data() {
		return {
			READ_IMG_URL: config.READ_IMG_URL,
			remindShow: false,
			remindDays: null,
			userLoading: false,
			userInfo: {},
			tableData: [],
			loading: false,
			currentPage: 1,
			pageSize: 50,
			total: 0,
			orderShow: false,
			applicationShow: false,
			selectData: {},
			selectTitle: "",
			partsShow: false,
			billing: {},
			sn: null,
			name: null,
			status: void 0,
			orderApprovalFlowIdType: void 0,
			paymentApprovalFlowIdType: void 0,
			collectedType: void 0,
			nickName: null,
			userId: null,
			userList: [],
			leaderboardShow: false,
			leaderboardLoading: false,
			leaderboardData: [],
			selectLeaderboard: {
				ranking: 0,
				percentage: 0.0,
				total: 0,
				salesAmount: 0.0,
				collectionAmount: 0.0,
				totalAmount: 0.0
			},
			selectDate: null,
			year: null,
			yearMonth: null,
			dateType: 'month',
		}
	},
	created() {
		this.initDate();
		this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
		this.userInfo.roleId = parseInt(this.userInfo.roleId)
	},
	destroyed() {
		// 组件销毁时，从本地存储移除orderId
		localStorage.removeItem("orderId");
	},
	mounted() {
		this.currentPage = this.$store.getters.purchase?.currentPage ?? 1
		this.pageSize = this.$store.getters.purchase?.pageSize ?? 50
		this.getOrderList();
	},
	methods: {
		// 获取订单列表
		getOrderList() {
			this.loading = true;
			const data = {
				sn: this.sn ?? this.$store.getters.purchase?.sn,
				name: this.name ?? this.$store.getters.purchase?.name,
				status: this.status ?? this.$store.getters.purchase?.status,
				userId: this.userId ?? this.$store.getters.purchase?.userId,
				currentPage: this.currentPage,
				pageSize: this.pageSize,
				orderApprovalFlowIdType: this.orderApprovalFlowIdType ?? this.$store.getters.purchase?.orderApprovalFlowIdType,
				paymentApprovalFlowIdType: this.paymentApprovalFlowIdType ?? this.$store.getters.purchase?.paymentApprovalFlowIdType,
				collectedType: this.collectedType ?? this.$store.getters.purchase?.collectedType
			}
			orderApi.getOrderList(data).then(res => {
				if (res.code === 200) {
					//console.log("res==>",res.data);
					this.tableData = res.data.orderVoList.map((item, index) => {
						item.i = (this.currentPage - 1) * this.pageSize + index + 1;
						if (item.copyOfIdCardList !== null) {
							let list = []
							item.copyOfIdCardList.forEach(img => {
								list.push(config.READ_IMG_URL + img);
							})
							item.copyOfIdCardList = list;
						}
						if (item.logisticsInformationList !== null) {
							let list = []
							item.logisticsInformationList.forEach(img => {
								list.push(config.READ_IMG_URL + img);
							})
							item.logisticsInformationList = list;
						}
						if (item.receiptList !== null) {
							let list = []
							item.receiptList.forEach(img => {
								list.push(config.READ_IMG_URL + img);
							})
							item.receiptList = list;
						}
						if (item.contractList !== null) {
							let list = []
							item.contractList.forEach(img => {
								list.push(config.READ_IMG_URL + img);
							})
							item.contractList = list;
						}
						return item;
					})
					this.total = res.data.total
				}
				this.$nextTick(() => {
					console.log(this.$store.getters.purchase)
					this.$refs.multipleTable.bodyWrapper.scrollTop = this.$store.getters.purchase?.tableScoll;
				})
			}).finally(() => {
				this.loading = false;
			})
		},
		// pageSize变化
		handleSizeChange(pageSize) {
			this.pageSize = pageSize
			this.getOrderList()
		},
		// 页码变化
		handleCurrentChange(curPage) {
			this.currentPage = curPage
			this.getOrderList()
		},
		// 展示零件列表
		partsOpen(row) {
			row.goodsList.forEach((part, index) => {
				part.i = index + 1
			})
			this.selectData = row;
			this.selectTitle = row.name;
			this.partsShow = true;
		},
		// 关闭零件列表
		partsClose() {
			this.selectData = {}
			this.selectTitle = ""
		},
		// 下单审核按钮是否显示
		examineButtonShow(item) {
			if (item.orderFlowId === "1" && item.paymentFlowId !== null) {
				return false;
			}
			return true;
		},
		// 下单审核按钮文字
		orderButtonText(orderFlowId) {
			//console.log('orderFlowId=>', orderFlowId)
			if (orderFlowId === "1") {
				return '订单通过';
			} else if (orderFlowId === "2") {
				return '订单驳回';
			}
			return '订单审核';
		},
		// 下单审核按钮类型
		orderButtonType(orderFlowId) {
			//console.log("orderFlowId=>",orderFlowId)
			if (orderFlowId === "1") {
				return 'success'
			} else if (orderFlowId === "2") {
				return 'danger'
			}
			return 'warning'
		},
		// 下单审核按钮是否禁用
		orderButtonDisabled(orderFlowId) {
			if (this.userInfo.roleId < 3 && orderFlowId === '0') {
				return false;
			}
			return true;
		},

		// 收款申请按钮
		applicationButton(item) {
			if (this.userInfo.roleId < 4 && item.orderFlowId === '1' &&
				item.paymentFlowId === null) {
				return true
			}
			return false
		},

		// 获取订单账单
		getOrderBillingList(orderId) {
			const data = {
				orderId: orderId,
				billStatus: 3
			}
			orderApi.getOrderBillingList(data).then(res => {
				if (res.code === 200) {
					//console.log("列表=>",res.data)
					if (res.data.length > 0) {
						this.billing = res.data[0];
					}
				}
			})
		},

		// 收款审核按钮是否显示
		paymentButtonShow(item) {
			if (item.orderFlowId === "1" && item.paymentFlowId !== null) {
				return true;
			}
			return false;
		},

		// 收款审核类型
		paymentButtonType(paymentFlowId) {
			if (paymentFlowId === "1") {
				return 'success'
			} else if (paymentFlowId === "2") {
				return 'danger'
			}
			return 'warning'
		},
		// 收款审核按钮是否禁用
		paymentButtonDisabled(paymentFlowId) {
			if (this.userInfo.roleId < 3 || this.userInfo.roleId === 6) {
				if (paymentFlowId === '0') {
					return false;
				}
			}
			return true;
		},
		// 收款审核按钮文字
		paymentButtonText(paymentFlowId) {
			if (paymentFlowId === "1") {
				return '收款通过';
			} else if (paymentFlowId === "2") {
				return '收款驳回';
			}
			return '收款审核';
		},
		// 行颜色
		tableRow({ row }) {
			//console.log("row==>", row)
			if (row.status === 1) {
				return {
					// background: '#f0f9eb'
					background: '#cfffd7'
				};
			} else if (row.status === 2) {
				return {
					// background: '#fef0f0'
					background: '#ffe1e1'
				};
			}
			return {
				// background: 'oldlace'
				background: '#ffdebd'
			};
		},
		// 订单详情
		details(item) {
			this.$store.commit("SET_PURCHASE", {
				sn: this.sn,
				name: this.name,
				status: this.status,
				orderApprovalFlowIdType: this.orderApprovalFlowIdType,
				paymentApprovalFlowIdType: this.paymentApprovalFlowIdType,
				collectedType: this.collectedType,
				userId: this.userId,
				tableScoll: this.$refs.multipleTable.bodyWrapper.scrollTop,
				currentPage: this.currentPage,
				pageSize: this.pageSize
			})
			localStorage.setItem("orderId", item.id);
			this.$router.push({
				path: "/order/order"
			})
		},
		// 下单按钮
		addOrder() {
			this.$router.push({
				path: "/order/order"
			})
		},
		// 下单审核按钮
		examine(item) {
			console.log(item)
			this.selectData = item;
			this.selectData.goodsList = item.goodsList.map((item, index) => {
				item.i = index + 1
				return item;
			})
			this.orderShow = true;
		},
		// 下单审核弹窗关闭
		orderCloseDialog() {
			this.selectData = {};
			this.orderShow = false;
		},
		// 订单审核
		orderExamine(type) {
			let msg = ''
			if (type === 1) {
				msg = '是否要通过订单？'
			} else if (type === 2) {
				msg = '是否要驳回订单？'
			}
			this.$confirm(msg, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				const data = {
					id: this.selectData.id,
					orderApprovalFlowId: type
				}
				orderApi.orderExamine(data).then(res => {
					if (res.code === 200) {
						this.$message.success("操作成功")
						this.orderCloseDialog();
						this.getOrderList();
					}
				})
			}).catch(() => { });
		},
		// 打开收款审核弹窗
		applicationOpen(item) {
			this.selectData = item;
			this.getOrderBillingList(item.id);
			this.applicationShow = true;
		},
		// 关闭收款审核
		applicationCloseDialog() {
			this.selectData = {};
			this.billing = {};
			this.applicationShow = false;
		},
		// 收款审核确定按钮
		orderPayment(type) {
			let msg = ''
			if (type === 1) {
				msg = '是否要通过收款申请？'
			} else if (type === 2) {
				msg = '是否要驳回收款申请？'
			}
			let _this = this
			this.$confirm(msg, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				const data = {
					id: _this.selectData.id,
					orderBillingId: _this.billing.id,
					paymentApprovalFlowId: type
				}
				orderApi.collectionAudit(data).then(res => {
					if (res.code === 200) {
						_this.$message.success("操作成功")
						_this.applicationCloseDialog();
						_this.getOrderList();
					}
				})
			}).catch(() => { });
		},
		// 远程搜索业务员
		async getUserList(query) {
			this.selectLoading = true;
			let data = {
				nickName: query,
				roleId: 3,
			}
			let roleId3 = await userApi.fuzzyQuery(data)
			data.roleId = 1
			let roleId1 = await userApi.fuzzyQuery(data)
			data.roleId = 7
			let roleId7 = await userApi.fuzzyQuery(data)
			this.userList = [...roleId1.data.userVoList, ...roleId3.data.userVoList, ...roleId7.data.userVoList]
			this.selectLoading = false;
		},
		// 根据业务员查询
		selectUserChange(e) {
			this.userId = e
			this.currentPage = 1
			this.pageSize = 50
			this.getOrderList()
		},
		// 根据状态查询
		selectStatusChange(e) {
			this.status = e
			this.currentPage = 1
			this.pageSize = 50
			this.getOrderList();
		},
		selectOTChange(e) {
			this.orderApprovalFlowIdType = e
			this.currentPage = 1
			this.pageSize = 50
			this.getOrderList();
		},
		selectPTChange(e) {
			this.paymentApprovalFlowIdType = e
			this.currentPage = 1
			this.pageSize = 50
			this.getOrderList();
		},
		selectCTChange(e) {
			this.collectedType = e
			this.currentPage = 1
			this.pageSize = 50
			this.getOrderList();
		},
		// 重置查询条件
		rest() {
			this.sn = null
			this.status = void 0
			this.orderApprovalFlowIdType = void 0
			this.paymentApprovalFlowIdType = void 0
			this.userId = null
			this.currentPage = 1
			this.pageSize = 50
			this.getOrderList();
		},
		// 删除
		deleteOrder(row) {
			this.$confirm("是否要删除该订单？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				orderApi.deleteOrder(row).then(res => {
					if (res.code === 200) {
						this.$message.success("删除成功")
						this.getOrderList();
					}
				}).finally(() => {
					loading.close();
				})
			}).catch(() => {

			});
		},
		initDate() {
			const currentYear = new Date().getFullYear();
			let currentMonth = new Date().getMonth() + 1;
			if (currentMonth < 10) {
				currentMonth = '0' + currentMonth;
			}
			this.selectDate = `${currentYear}-${currentMonth}`;
			this.yearMonth = this.selectDate;
		},
		// 排行榜
		leaderboard() {
			this.leaderboardShow = true;
			this.leaderboardLoading = true;
			const data = {
				roleId: 3,
				year: this.year,
				yearMonth: this.yearMonth,
			}
			orderApi.orderRoyalty(data).then(res => {
				if (res.code === 200) {
					this.leaderboardData = res.data.map(item => {
						if (item.userId === this.userInfo.id) {
							this.selectLeaderboard = item
						}
						return item;
					});
				}
			}).finally(() => {
				this.leaderboardLoading = false;
			})
		},
		changeDate() {
			//console.log("选择的日期==>",this.selectDate)
			this.year = null;
			this.yearMonth = null;
			if (this.selectDate !== null) {
				const year = this.selectDate.getFullYear();
				const month = this.selectDate.getMonth() + 1; // 月份从 0 开始，需要加 1
				// 格式化月份，确保始终是两位数
				const formattedMonth = month < 10 ? '0' + month : month;
				if (this.dateType === "year") {
					this.year = year;
				} else if (this.dateType === "month") {
					this.yearMonth = `${year}-${formattedMonth}`;
				}
			}
			this.leaderboard();
		},
		changeType() {
			this.selectDate = new Date();
			this.changeDate();
		},
		// 获取提醒天数
		getRemindDays() {
			orderApi.getReminderDays().then(res => {
				if (res.code === 200) {
					this.remindDays = res.data.court;
					this.remindShow = true;
				}
			})
		},
		// 输入检查
		inputCheck() {
			let inputNumber = this.remindDays
			if (inputNumber <= 0) {
				inputNumber = 1
			}
			// 只能输入整数
			let regex = /\./;
			if (regex.test(inputNumber)) {
				// 带小数设置为1
				inputNumber = 1
			}
			let value = parseInt(inputNumber)
			if (isNaN(value)) {
				value = 1;
			}
			this.remindDays = value
		},
		// 修改提醒天数
		updateReminderDays() {
			const data = {
				court: this.remindDays
			}
			orderApi.updateReminderDays(data).then(res => {
				if (res.code === 200) {
					this.$message.success("修改成功");
					this.remindShow = false;
				}
			})
		},
		//导出Excel
		exportExcel() {
			let excelTableData = structuredClone(this.tableData)
			excelTableData.map(item => {
				item.orderType = item.orderType === 1 ? "开销开单" : "签订合同"
				item.paymentMethod = item.paymentMethod > 0 ? "分期" : "全款"
				item.paymentType = item.paymentType === 0 ? "先发后付" : "先付后发"
				item.status = item.status ? "已收款" : "未收款"
			})
			const data = this.formatData(excelTableData); // 将数据格式化为xlsx可以识别的格式
			const wb = this.$XLSX.utils.book_new();
			const ws = this.$XLSX.utils.json_to_sheet(data);
			// 设置列宽
			const columnWidths = [
				{ wch: 5 },
				{ wch: 30 }, // 供应商名称列宽度
				{ wch: 15 }, // 联系电话列宽度
				{ wch: 50 }, // 联系地址列宽度
				{ wch: 25 } // 备注列宽度
			];
			ws['!cols'] = columnWidths;
			this.$XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
			this.$XLSX.writeFile(wb, "供应商信息.xlsx");
		},
		formatData(data) {
			// 格式化表格数据，将对象数组转换为数组对象
			return data.map((item) => {
				const {
					i,
					orderType,
					name,
					company,
					phone,
					nickName,
					deliveryTime,
					transactionAmount,
					paymentMethod,
					paymentType,
					status
				} = item;
				return {
					序号: i,
					订单类型: orderType,
					客户姓名: name,
					公司名称: company,
					联系电话: phone,
					业务员: nickName,
					交货时间: deliveryTime,
					总金额: transactionAmount,
					付款方式: paymentMethod,
					付款类型: paymentType,
					订单状态: status
				};
			});
		},
	},
}
</script>

<style>
.orderList {
	height: 100%;
}

.order-table {
	height: 94%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	margin-top: 10px;
}

.el-form--inline .el-form-item {
	width: 430px;
	margin-right: 40px;
}

.leaderboardLabel {
	display: inline-block;
	width: 165px;
}
</style>